<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="syl-order">
          <div slot="header" class="clearfix">
            <span>总订单金额</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="contrast">
              <div class="syl-contrast-on">
                <img src="@/assets/image/envelope.png" alt="">
              </div>
              <div class="syl-contrast-under" v-html="'¥'+tran(queryName.packageTotalMoney)" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="syl-meal">
          <div slot="header" class="clearfix">
            <span>套餐数量</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="contrast">
              <div class="syl-contrast-on">
                <img src="@/assets/image/smiley.png" alt="">
              </div>
              <div class="syl-contrast-under" v-html="tran(queryName.packageTotalNum)" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="syl-darter">
          <div slot="header" class="clearfix">
            <span>订单数量</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="contrast">
              <div class="syl-contrast-on">
                <img src="@/assets/image/amount.png" alt="" style="width: 44px">
              </div>
              <div class="syl-contrast-under" v-html="tran(queryName.orderNum)" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="syl-green">
          <div slot="header" class="clearfix">
            <span>剩余产能/最大产能</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="capacity" v-html="tran(queryName.capacity)" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="month">
      <el-row>
        <el-col :span="8">
          <el-button :class="[typeName === 1?'active': 'ordinary']" size="mini" @click="getSales(1)">销售额</el-button>
          <el-button :class="[typeName === 2?'active': 'ordinary']" size="mini" @click="getOrderType(2)">订单量</el-button>
        </el-col>
        <el-col :span="16">
          <div style="text-align: right">
            <el-button :class="[type===1?'active':'ordinary']" size="mini" @click="getDate(1)">近7日</el-button>
            <el-button :class="[type===2?'active':'ordinary']" size="mini" @click="getDate(2)">近15日</el-button>
            <el-button :class="[type===3?'active':'ordinary']" size="mini" @click="getDate(3)">近30日</el-button>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              size="mini"
              :clearable="false"
              range-separator="~"
              value-format="timestamp"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getRangeTime"
            />
          </div>
        </el-col>
      </el-row>
      <div class="export">
        <h3>导出订单汇总</h3>
      </div>
      <div class="export">
        选择导出时间:
        <el-date-picker
          v-model="dateRange1"
          type="daterange"
          size="mini"
          range-separator="~"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-button v-preventReClick type="primary" size="mini" icon="el-icon-download" @click="getMealVlaue">导出
        </el-button>
      </div>
      <div id="nprdjmakl" class="ordering" />
    </div>
  </div>
</template>
<script>
import { getOrderInfo, getOrderNum, getStoreSaleMoney } from '@/api/stream/storeList'
import serverMap from '../../../../../config/serverMap'
import { parseTime } from '@/utils'

export default {
  name: 'Index',
  data() {
    return {
      // 时间切换
      type: 1,
      // 本周本月切换
      typeName: 1,
      dateRange: [],
      dateRange1: [],
      date: [],
      open: false,
      // 非多个禁用
      multiple: true,
      form: {},
      // 门店id
      queryNames: {
        name: '',
        totalOrder: '',
        setMeal: '',
        order: '',
        storeId: null
      },
      queryName: {
        capacity: 0,
        orderNum: 0,
        packageTotalMoney: 0,
        packageTotalNum: 0
      },
      rules: {}
    }
  },
  created() {
    this.queryNames.storeId = this.$route.query.id
    this.getDate(1)
  },
  mounted() {
    this.getSales(1)
    this.getOrderList()
  },
  methods: {
    /** 本周,本月,半月 **/
    getDate(row) {
      const end = new Date()
      const start = new Date()
      const typeName = this.typeName
      if (row === 1) {
        this.type = 1
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      } else if (row === 2) {
        this.type = 2
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
      } else {
        this.type = 3
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      }
      this.dateRange = [start, end]
      if (typeName === 1) {
        this.getSales(1)
      } else {
        this.getOrderType(2)
      }
    },
    /** 营业日  **/
    getOrdering(x, y, value) {
      var rateChart
      if (rateChart != null && rateChart !== '' && rateChart !== undefined) {
        rateChart.dispose()// 销毁
      }
      // 基于准备好的dom，初始化echarts实例
      rateChart = this.$echarts.init(document.getElementById('nprdjmakl'))
      // 绘制图表
      rateChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          width: '89%', // 宽度
          height: '76%', // 高度
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: x
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: value,
            data: y,
            type: 'line',
            areaStyle: {
              color: 'transparent'// 改变区域颜色
            }
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          rateChart.resize()
        })
      }, 200)
    },
    /** 导出 **/
    getMealVlaue() {
      const dateRange1 = this.dateRange1
      if (dateRange1.length > 0) {
        const data = {
          startDate: parseTime(this.dateRange1[0], '{y}-{m}-{d}'),
          endDate: parseTime(this.dateRange[1], '{y}-{m}-{d}')
        }
        window.location.href = serverMap.base + '/api/order/exportStoreOrderList?startDate=' + data.startDate + '&endDate=' + data.endDate + '&storeId=' + this.queryNames.storeId
      } else {
        return this.msgInfo('请选择时间')
      }
    },
    /** 获取门店总体统计 **/
    getOrderList() {
      getOrderInfo(this.addDateOrders(this.queryNames, this.dateRange)).then(res => {
        this.queryName = res.data
      })
    },
    /** 销售额 **/
    getSales(row) {
      this.typeName = row
      getStoreSaleMoney(this.addDateOrders(this.queryNames, this.dateRange)).then(res => {
        const { data } = res
        const x = data.map((item) => item.orderTime)
        const y = data.map((item) => item.orderTotalMoney)
        this.getOrdering(x, y, '销售额')
      })
    },
    /** 订单量 **/
    getOrderType(row) {
      this.typeName = row
      getOrderNum(this.addDateOrders(this.queryNames, this.dateRange)).then(res => {
        const { data } = res
        const x = data.map((item) => item.orderTime)
        const y = data.map((item) => item.packageTotalNum)
        this.getOrdering(x, y, '订单量')
      })
    },
    /** 自定义时间 **/
    getRangeTime() {
      const typeName = this.typeName
      this.type = 4
      if (typeName) {
        this.getSales(typeName)
      } else {
        this.getOrderType(typeName)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}

.syl-order {
  width: 100%;
  height: 220px;
  background-image: url("./../../../../assets/image/sales.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    width: 100%;
    height: 162px;

    .syl-contrast-on {
      width: 100%;
      height: 85px;
      line-height: 97px;
      text-align: center;

      img {
        width: 50px;
        height: 58px;
        vertical-align: middle;
      }
    }

    .syl-contrast-under {
      width: 100%;
      height: 38px;
      text-align: center;
      font-size: 22px;
      line-height: 38px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.syl-meal {
  width: 100%;
  height: 220px;
  background-image: url("./../../../../assets/image/views.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    width: 100%;
    height: 162px;

    .syl-contrast-on {
      width: 100%;
      height: 85px;
      line-height: 97px;
      text-align: center;

      img {
        width: 56px;
        height: 56px;
        vertical-align: middle;
      }
    }

    .syl-contrast-under {
      width: 100%;
      height: 38px;
      text-align: center;
      font-size: 22px;
      line-height: 38px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.syl-darter {
  width: 100%;
  height: 220px;
  background-image: url("./../../../../assets/image/darter.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    width: 100%;
    height: 162px;

    .syl-contrast-on {
      width: 100%;
      height: 85px;
      line-height: 97px;
      text-align: center;

      img {
        width: 56px;
        height: 56px;
        vertical-align: middle;
      }
    }

    .syl-contrast-under {
      width: 100%;
      height: 38px;
      text-align: center;
      font-size: 22px;
      line-height: 38px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.syl-green {
  width: 100%;
  height: 220px;
  background-image: url("./../../../../assets/image/green.png");
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;

  .capacity {
    width: 160px;
    height: 160px;
    margin: auto;
    background-image: url("./../../../../assets/image/capacity.png");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    margin-top: -8px;
    text-align: center;
    font-size: 22px;
    line-height: 80px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.box-card {
  width: 100%;
  height: 220px;
  border-radius: 10px;

  .text {
    font-size: 14px;

    .order {
      width: 100%;
      height: 40px;
      text-align: left;
      line-height: 40px;
      font-size: 22px;
      font-weight: 600;
    }

    .darter {

    }

    .green {

    }
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
}

.month {
  margin-top: 20px;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 2px;
  padding: 20px;

  .active {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .ordering {
    width: 100%;
    margin: 20px 0;
    height: 360px;
  }
}

.export {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  color: #333333;
  font-weight: 400;

  h3 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: #333333;
  }
}

.syl-contrast {
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}

/deep/ .el-card__header {
  border: 0;
}

/deep/ .el-card {
  border-radius: 10px;
}

/deep/ .el-card__body {
  padding: 0;
}

/deep/ .el-icon-date:before {
  color: #89C6FF;
}
</style>
